<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    #box{
      width: 600px;
      background:#999999;
      height:30px;
      position:relative;
      margin: 50px auto;
    }
    #progress{
      height:100%;
      position:absolute;
      background:pink;
      width:10px;
    }
    span{
      width:20px;
      height:40px;
      background:green;
      position:absolute;
      margin-top:-5px;
      cursor: pointer;
    }
  </style>
</head>
<body>
<div id="box">
  <div id="progress"></div>
  <span>
   </span>
</div>

</body>
<script>
window.onload=function () {
  var pro=document.getElementById("progress");
  var handle=document.getElementsByTagName("span")[0];
  var box=document.getElementById("box");
   var a=function (e) {
     var pointX = e.pageX - handle.offsetLeft - box.offsetLeft;
     document.onmousemove = function (e) {
       var x = e.pageX - box.offsetLeft - pointX;
       //动起来
       if (x < 0) {
         x = 0;
       } else if (x > box.offsetWidth - handle.offsetWidth) {
         x = box.offsetWidth - handle.offsetWidth;
       }
       handle.style.left = x + 'px';
       pro.style.width=x+'px';
       handle.innerText=parseInt(100*x/(box.offsetWidth-handle.offsetWidth))+"%";
       console.log(handle.innerText);
     }
   }

    handle.addEventListener("mousedown",a);

    document.addEventListener("mouseup",function () {
      document.onmousemove=null;
   })


}






</script>
</html>
